iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Modern Web

Full Stack Web Development 網站實作系列 第 28

Day 28 GraphQL(7) - Apollo Server -Mutation - Gúa ê Tâi-gí chheh tô͘-su-koán(我的台語冊圖書館) app(4)

  • 分享至 

  • xImage
  •  

Mutations 新增修改資料:
在 REST,我們使用 POST 和 PUT 新增修改資料,在 GraphQL,用 mutations 新增修改資料。

現在,修改程式,使用 mutations 新增書籍和作者資料。
首先,在 schema 定義部分,加入 Mutation type。

type Query {
  bookCount: Int!
  ...
  findAuthor(name: String!) : Author
}

  type Mutation {
    addBook(                // 接受四個 arguments
      title: String!
      published: String!
      name: String!
      genres: [String!]!
    ) : Book                // 傳回型態(type) Book 的 response
    addAuthor(
      name: String!,
      born: String
    ) : Author
  }
`

接下來,在 resolver 部分,定義處理這些 mutations 的函數。

const { v1: uuid } = require('uuid')

...
const resolvers = {
...

Mutation: {          // Mutation object
  addBook(parent, args, context, info) {
    const book = { 
	  title: args.title,           
	  published: args.published,
	  author: args.name,
	  id: uuid(),
	  genres: args.genres,
    };
    books = books.concat(book)    // 加入 books 資料集
    return book;
  },
  addAuthor(parent, args, context, info) {
    const author = { ...args, id: uuid() }
    authors = authors.concat(author)
    return author
  } 
}

打開瀏覽器,進入 http://localhost:4000 ,點選 Query your server,進入我們 Apollo server。

新增作者:

mutation {
  addAuthor(name: "Mio Yuoko") {
    name
}

https://ithelp.ithome.com.tw/upload/images/20221013/20129584fiot8hEAE9.png
查看所有作者:
https://ithelp.ithome.com.tw/upload/images/20221013/20129584iVvvfK97nT.png

新增書籍:

mutation{
  addBook(title: "Taiwanese for Beginners", published: "2012", name: "Mio Yuoko", genres: ["Taiwanese", "Japanese", "TaiLo"]) {
  title
  published
  author {
    name
  }
  id
  genres
}

https://ithelp.ithome.com.tw/upload/images/20221014/20129584TnWmaC3brH.png
查看所有書籍:
https://ithelp.ithome.com.tw/upload/images/20221014/201295843atC3DWvsn.png


上一篇
Day27 GraphQL(6) - Apollo Server - Gúa ê Tâi-gí chheh tô͘-su-koán(我的台語冊圖書館) app(3)
下一篇
Day 29 GraphQL(7) - Apollo Client - Gúa ê Tâi-gí chheh tô͘-su-koán(我的台語冊圖書館) app
系列文
Full Stack Web Development 網站實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言